<!--
 * @Author: your name
 * @Date: 2022-03-02 23:38:16
 * @LastEditTime: 2022-04-09 20:18:45
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\views\home\header\Header.vue
-->
<template>
  <div class="header">
    <div class="container">
      <span class="title">博客</span>
      <div class="center">
        <template v-for="item in navList">
          <router-link
            tag="span"
            :to="{ path: item.path }"
            :key="item.id"
            class="item-name"
            >{{ item.name }}</router-link
          >
        </template>
      </div>
      <!-- 下拉菜单 -->
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <!-- 用户的头像 -->
          <img :src="user.avatar" alt="" style="width: 50px; height: 50px" />
          <i class="el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item command="showMe">我的</el-dropdown-item> -->
          <a
            href="https://github.com/lin-xin/vue-manage-system"
            target="_blank"
          >
            <el-dropdown-item>后台界面</el-dropdown-item>
          </a>
          <el-dropdown-item divided command="loginout"
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 我的详情页面 -->
    <!-- <Me :meDialogVisible.sync="meDialogVisible" /> -->
  </div>
</template>
<script>
// 导入本地存储的函数
import db from '@/util/localstorage'
// 导入我的组件
// import Me from "@/views/me/Me.vue";
export default {
  name: 'Header',
  props: {
    user: {
      type: Object,
      default: {}
    }
  },
  // components: {
  //   Me
  // },
  data() {
    return {
      // 我的界面是否可见
      // meDialogVisible: false,
      currentIndex: 0,
      navList: [
        { id: 1, name: '博文', path: '/home/article' },
        { id: 2, name: '新闻', path: '/home/news' },
        { id: 3, name: '留言', path: '/home/message' },
        { id: 4, name: '日记', path: '/home/diary' },
        { id: 5, name: '视频', path: '/home/video' },
        { id: 6, name: '我的', path: '/home/me' }
      ]
    }
  },
  methods: {
    // 每一个点击选项
    itemClick(index) {
      console.log('根据不同的点击事件跳路由')
      this.currentIndex = index
    },
    //处理下来点击的问题
    handleCommand(command) {
      // if (command == "showMe") {
      //   // 打开我的弹框
      //   this.meDialogVisible = true;
      // }
      if (command == 'loginout') {
        // 退出登录
        db.clear()
        this.$router.push('/login')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  height: 60px;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid #ccc;
  background: #fff;
  .container {
    width: 1240px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 30px;
    }
    .center {
      cursor: pointer;
      // .tname {
      //   padding: 0 30px;
      //   cursor: pointer;
      // }
      .item-name {
        font-size: 16px;
        padding: 0 30px;
      }
      .router-link-active {
        color: blue;
      }
      // .activeClass {
      //   color: blue;
      // }
    }
    .right {
      cursor: pointer;
      .login {
        margin-right: 10px;
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
  }
}
.active {
  color: rgb(247, 98, 144);
}
</style>
